<template>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">
      <router-link to="/" tag="p"  exact-active-class='active'>首页</router-link>
    </van-tabbar-item>
    <van-tabbar-item icon="cluster-o">
      <router-link to="/Category"  active-class='active'>分类</router-link>
    </van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o">
      <!-- <router-link to="/ShoppingCar"  active-class='active'>购物车</router-link> -->
      <router-link :to="{name:'ShoppingCar'}"  active-class='active'>购物车</router-link>
    </van-tabbar-item>
    <van-tabbar-item icon="user-o">
      <!-- <router-link to="/My?username=aaa"  active-class='active'>我的</router-link> -->
      <router-link :to="{path:'/My',query:{username:'aaa'}}"  active-class='active'>我的（vueX）</router-link>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name:"FooterBar",
  data() {
    return {
      active: 1,
    };
  },
};
</script>

<style scoped>
.active{
  color:red
}
</style>